<template>
  <div class="business-goods-shop-menu">
    <!-- left -->
    <div class="left">
      <ShopListMenu @emitShopId="emitShopId" />
    </div>
    <!-- right -->
    <div class="right">
      <div class="top">
        <div class="flexRBC">
          <div class="title">{{ shopName }}</div>
          <el-button
            v-if="!$store.getters.banBtnList.includes('BTN_WCANYIN_MENU_COPY')&&$store.state.user.shopId===0&&shopId!==''"
            class="f-r"
            size="medium "
            type="primary"
            round
            @click="handleCopy"
          >复制菜单到</el-button>
        </div>

        <div class="tab">
          <el-tabs v-model="activeName">
            <el-tab-pane label="分类管理" name="classifi" />
            <el-tab-pane label="菜品资料" name="info" />
            <el-tab-pane label="菜品属性" name="second" />
          </el-tabs>
        </div>
      </div>

      <div class="bottom app-main-content-box">
        <classi-fiction
          v-if="activeName==='classifi'&&shopId"
          :shop-id="shopId"
          :tab-name="activeName"
        />
        <!-- <info-bar v-if="activeName==='info'&&shopId" :shop-id="shopId" :tab-name="activeName" /> -->
        <info-tabs v-if="activeName === 'info'" :shop-id="shopId" :tab-name="activeName" />

        <menu-attr v-if="activeName==='second'&&shopId" :shop-id="shopId" :tab-name="activeName" />
      </div>
    </div>

    <!--复制-->
    <DialogShopListTree ref="dialogShopListTree" title="复制菜单到门店" @emitShopIds="emitShopIds" />
  </div>
</template>

<script>
import InfoBar from '../food-information/components/InfoBar'
import menuAttr from '../food-information/components/menuAttribute'
import classiFiction from '../classification-management/index'
import InfoTabs from '../components/InfoTabs'

import { copyMenu } from '@/views/wcyModule/api/restaurant'
export default {
  components: {
    classiFiction: classiFiction,
    InfoBar: InfoBar,
    menuAttr: menuAttr,
    InfoTabs
  },
  data() {
    return {
      activeName: 'classifi',
      shopId: '',
      shopName: ''
    }
  },
  mounted() {},
  methods: {
    /**
       * 按钮组
       */
    // 复制到
    handleCopy() {
      this.$refs.dialogShopListTree.open()
    },

    // 选择门店ids回调
    emitShopIds(ids) {
      if (ids.length === 0) {
        this.$alert('请至少选择一个门店复制', '提示', {
          confirmButtonText: '确定',
          center: true,
          type: 'warning',
          callback: action => {}
        })
      } else {
        this.$refs.dialogShopListTree.loading()
        copyMenu({ fromShopId: this.shopId, toShopIds: ids })
          .then(res => {
            this.$alert('复制菜单成功', '提示', {
              confirmButtonText: '确定',
              center: true,
              type: 'success',
              callback: action => {}
            })
            this.$refs.dialogShopListTree.hide()
          })
          .finally(() => {
            this.$refs.dialogShopListTree.loading(false)
          })
      }
    },

    // 选择门店
    emitShopId(item) {
      this.shopId = item.shopId
      this.shopName = item.shopName
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  /* 左侧组织 */
  .left {
    float: left;
  }
  /* 右侧表格 */
  .right {
    overflow: hidden;
    .top {
      margin-bottom: 10px;
      .title {
        font-size: 20px;
      }
    }
    /* 搜索*/
    .list-search {
      border-top: 1px solid #e7e7e7;
      padding-top: 10px;
      margin-bottom: 10px;
      .el-select {
        width: 120px;
      }
      .el-input {
        width: 400px;
        margin-right: 10px;
      }
    }
  }
  .top {
    padding: 24px 30px 0;
    border-radius: 5px 5px;
    background-color: #fff;
    .title {
      font-size: 20px;
    }
  }

  .box-input {
    width: 360px;
    margin-right: 20px;
  }
  .box-btn {
    width: 100px;
    // background-color: rgb(24, 144, 255);
  }
  .f-r {
    float: right;
  }
  .mp {
    margin-top: 30px;
  }
  .bl {
    color: rgb(77, 130, 243);
    font-size: 14px;
  }
  .one-line {
    display: inline-block;
    width: 160px;
  }
  .isNull {
    color: red !important;
  }
  .botoom-bg {
    padding: 24px 0px;
    border-radius: 5px;
    background-color: #fff;
  }
  .addTime {
    margin-bottom: 20px;
  }
  ::v-deep .el-form-item .el-form-item {
    display: inline-block;
  }
</style>
<style rel="stylesheet/scss" lang="scss">
  /* reset element*/
  .business-goods-shop-menu {
    .el-tabs__header {
      margin-bottom: 0;
      background-color: #fff;
      border-radius: 0 0 5px 5px;
    }
    .el-tabs__nav-wrap::after {
      background-color: #fff;
    }
    .el-tabs__active-bar {
      height: 4px;
    }
  }
</style>
